<!-- 商品列表 -->
<template>
  <div v-loading="loading">
    <el-header>
      <el-space wrap>
        <!-- 搜索部分 -->
        <el-input
          clearable
          v-model.trim="configReq.title"
          @keyup.enter="getInfo"
          placeholder="输入商品名称"
        />
        <el-input
          clearable
          v-model.trim="configReq.barcode"
          @keyup.enter="getInfo"
          placeholder="输入商品条形码"
        />
        <el-select v-model="configReq.status" clearable placeholder="请选择商品状态">
          <el-option
            v-for="item in options.status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-cascader
          clearable
          @focus="getCategory"
          v-model="configReq.categoryId"
          :props="props"
          placeholder="请选择类目"
          :options="categoryList"
          :show-all-levels="false"
        />
        <el-button type="primary" :icon="Search" @click="getInfo">查找</el-button>
        <el-button type="primary" :icon="Plus" @click="$router.push({ name: 'create' })"
          >添加</el-button
        >
      </el-space>
    </el-header>
    <el-container>
      <!-- 表格部分 -->
      <el-table :data="infoList" border align="center">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="sku信息" type="expand" align="center" width="60">
          <template #default="scope">
            <el-table :height="300" :data="scope.row.skuList" border>
              <el-table-column prop="barCode" label="商品条码" align="center" />
              <el-table-column prop="title" label="商品标题" align="center" />
              <el-table-column prop="stock" label="商品库存" align="center" />
              <el-table-column prop="originalPrice" label="原价" align="center" />
              <el-table-column prop="price" label="现价" align="center" />
              <el-table-column width="500" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="商品ID" align="center" width="90" />
        <el-table-column prop="title" label="名称" align="center" />
        <el-table-column label="图片" align="center">
          <template #default="scope">
            <el-popover placement="right" :width="300" trigger="hover">
              <template #reference>
                <el-image style="height: 35px" :src="scope.row.img" />
              </template>
              <el-image style="width: 100%" :src="scope.row.img" />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="商品详细介绍" width="90" align="center">
          <template #default="scope">
            <el-button type="primary" @click="lookDetails(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="categoryId" label="类目ID" align="center" />
        <el-table-column prop="freightTemplateId" label="邮费模板ID" align="center" />
        <el-table-column prop="sales" label="销量" align="center" />
        <el-table-column prop="unit" label="单位" align="center" />
        <el-table-column label="是否在售" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status ? 'success' : 'warning'">{{
              scope.row.status ? "在售" : "下架"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center" />
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button
              type="primary"
              @click="
                $router.push({
                  name: 'edit',
                  params: { id: scope.row.id },
                })
              "
              >编辑</el-button
            >
            <el-button
              :type="scope.row.status ? 'warning' : 'success'"
              @click="changeStatus(scope.row)"
              >{{ scope.row.status ? "下架" : "激活" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 详情弹出框 -->
      <el-dialog v-model="dialogVisible" :width="800" title="商品详情">
        <div v-html="detailHtml"></div>
      </el-dialog>
    </el-container>
    <div style="margin: 20px 0px">
      <!-- 分页组件 -->
      <ElPagination
        :total="pageInfo.total"
        :limit="pageInfo.limit"
        @changeReq="changeConfig"
      ></ElPagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { post } from "@/request/http";
import { Search, Plus } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";

// 数据
const loading = ref(false); //是否正在加载
const infoList = ref([]); //数据列表
const categoryList = ref([]); //类目列表
const dialogVisible = ref(false); //是否显示详情弹出框
const detailHtml = ref(""); //详情的html片段
// 请求表格数据的配置
let configReq: any = reactive({
  _gp: "admin.product",
  _mt: "list",
  title: "", //商品名称
  page: 1, //跳转页数
  limit: 10, //显示条数
  barcode: "", //条形码
  status: null, //商品状态
  categoryId: null, //类目ID
});

// 传给分页组件的数据
let pageInfo = reactive({
  page: 1, //跳转页数
  limit: 10, //显示条数
  total: 0,
});
// 选择器数据
const options = reactive({
  status: [
    { value: 0, label: "下架" },
    { value: 1, label: "正常" },
  ],
});
// 类目级联选择器的配置
let props = reactive({
  label: "title",
  children: "childrenList",
  value: "id",
  emitPath: false,
  checkStrictly: true,
});

// 方法部分
// 获取表格数据的方法
const getInfo = () => {
  loading.value = true; //显示加载
  post(configReq)
    .then((res) => {
      if (200 == res?.errno) {
        //成功状态码
        // console.log(res);
        let { items, total } = res.data;
        infoList.value = items; //获取表格信息
        pageInfo.total = total; //获取总条数
        loading.value = false; //加载完毕
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
// 分页切换触发
const changeConfig = (e: { page: number; limit: number }) => {
  Object.assign(configReq, { limit: e.limit, page: e.page });
  getInfo();
};
// 请求类目列表
const getCategory = () => {
  if (categoryList.value.length) return; //在没有类目数据的时候请求
  post({ _gp: "admin.category", _mt: "categoryTree" }).then((res) => {
    if (200 == res?.errno) {
      //成功状态码
      categoryList.value = res.data;
    }
  });
};
//查看详情
const lookDetails = (spuId: number) => {
  dialogVisible.value = true;
  post({ _gp: "admin.product", _mt: "detail", spuId }).then((res) => {
    if (200 == res?.errno) {
      detailHtml.value = res.data.detail;
    }
  });
};
// 切换状态的操作
const changeStatus = (data: any) => {
  let { id: spuId, status } = data;
  post({
    _gp: "admin.product",
    _mt: "freezeOrActivation",
    status: status ? 0 : 1,
    spuId,
  })
    .then((res) => {
      if (200 == res?.errno) {
        ElMessage.success(status ? "下架成功" : "激活成功");
        getInfo(); //更新数据
      }
    })
    .catch((err) => console.log(err));
};
onMounted(() => {
  getInfo();
});
</script>

<style scoped lang="less">
.el-header {
  height: auto;
  margin-bottom: 20px;
}
</style>
